<template>
	<view class="chat-index" ref="uv-back-top">
		<headers :state="state" @custom-event="e=>state = e"></headers>
		<!-- height: calc(100vh - 50px); -->
		<el-container :style="$uv.os() == 'windows'?'height: auto;':'height: calc(100vh - 115px);overflow: auto;'">
			<asided :aicurrent="aicurrent" :asideW="state?70:0" @custom-type="e=>aiType = e" @custom-list="e=>lists = e"
				@custom-event="customI">
			</asided>
			<view :class="$uv.os() == 'windows'?'nowrap':'wrap'" style="display: flex;justify-content: space-around;">
				<articles ref="articles" v-if="aiType" @focus="$uv.os() != 'windows'?state = false:''" v-model="taskid"
					@refresh="reresh" :articleInfo="dataInfo" :type="aiType" :asideW="450" :aicurrent="aicurrent">
				</articles>
				<chat style="max-width: 850px;margin-right:10px;background-color: #;"
					@focus="$uv.os() != 'windows'?state = false:''" v-model="taskid" @refresh="reresh"
					:chatInfo="dataInfo" :type="aiType" :asideW="450" :aicurrent="aicurrent"
					@save="e=>$refs.articles.confirm(dataInfo.task,e)">
				</chat>
			</view>
			<view v-if="$uv.os() == 'windows'">
				<el-aside :width="footers?historyW*2.4+'px':historyW+'px'"
					style="background-color: #fff;box-shadow: 10px 10px 20px #ccc;padding:10px 10px 0px;transition: width 1s;top:52px; right: 0px;border: 1px solid #f2f2f2;border-top-left-radius:10px;border-bottom-left-radius:10px;position: fixed;">
					<view style="position: fixed;margin-left: 0px;margin-top: 45vh;">
						<view class="cursor-pointer" style="margin-left: -30px;background-color: #f2f2f2;padding: 8px;"
							@click="footers = !footers"
							:style="'width:200px;display: flex;justify-content: center;align-items: center;border-radius: 50%;width:20px ; height: 20px;'">
							<i v-if="footers" class="el-icon-arrow-right" style="font-size: 25px;"></i>
							<i v-else class="el-icon-arrow-left" style="font-size: 25px;"></i>
						</view>
					</view>
					<view class=""
						style="height: calc(100vh - 110px);padding: 2px 5px;display: flex;justify-content: flex-start;align-items: center;overflow: auto;">
						<history :footers="footers" :shareId="taskid" :refresh="refresh" :title="'对话'" :assembly="false"
							@submit="getVuex">
						</history>
					</view>
				</el-aside>
				<el-aside :width="historyW+'px'"></el-aside>
			</view>
			<el-aside v-else :width="footers?historyW+'px':'0px'"
				style="height: calc(100vh - 112px);box-shadow: 10px 10px 20px #ccc;padding:5px 5px 0px;transition: width 1s;top:52px; right: 0px;border: 1px solid #f2f2f2;border-top-left-radius:10px;border-bottom-left-radius:10px;position: fixed;background-color: #fff">
				<view style="position: fixed;margin-left: 0px;margin-top: 45vh;z-index:1;">
					<view style="margin-left: -25px;background-color: #f2f2f2;padding: 7px;" @click="footers = !footers"
						:style="'width:200px;display: flex;justify-content: center;align-items: center;border-radius: 50%;width:20px ; height: 20px;'">
						<i v-if="footers" class="el-icon-arrow-right" style="font-size: 25px;"></i>
						<i v-else class="el-icon-arrow-left" style="font-size: 25px;"></i>
					</view>
				</view>
				<view
					style="height: calc(100vh - 122px);display: flex;justify-content: flex-start;align-items: center;overflow: auto;">
					<history :shareId="taskid" :footers="false" :refresh="refresh" :title="'对话'" :assembly="false"
						@submit="getVuex">
					</history>
				</view>
			</el-aside>
		</el-container>
		<uv-toast ref="toast"></uv-toast>
		<tabbars></tabbars>
	</view>
</template>

<script>
	// 引入
	import contents from '@/components/content/content';
	import history from '@/components/history/history';
	import tabbars from '@/components/tabbar/tabbar';
	import {
		task,
		api,
		apiId,
		getName,
		getScroll,
		scroll
	} from '@/common/api.js';
	import headers from '@/components/header/header.vue';
	import asided from '@/pages/aside/aside.vue';
	import chat from './chat.vue';
	import articles from './article.vue';
	import config from '@/common/config'
	export default {
		components: {
			// 注册组件
			tabbars,
			contents,
			history,
			headers,
			asided,
			articles,
			chat,
		},
		data() {
			return {
				fill: config.fill,
				dialogueColor: '#F4F5F9',
				deepColor: '#4D4D4D',
				shallowColor: '#808080',
				lightColor: '#ccc',
				state: true,
				asideW: 70,
				asiW: 420,
				footers: false,
				aicurrent: 0,
				historyW: 155,
				aiType: 'article',
				lists: {},
				dataInfo: {},

				tabbarsValue: 'fusion',
				devel: config.env === 'development',
				refresh: '',
				taskid: '',
				id: '',
			}
		},
		watch: {
			refresh(newVal, oldVal) {
				this.getVuex(this.taskid);
			},
		},
		created() {
			this.tabbarsValue = this.pages();
		},
		onLoad(ee) {
			if (ee && ee.id) {
				this.getVuex(ee.id, true);
			}
			if (ee && ee.current) {
				this.aicurrent = Number(ee.current);
			}
		},
		methods: {
			customI(e) {
				this.aicurrent = e;
				this.empty();
			},
			empty() {
				this.taskid = '';
				this.lists = {};
				this.dataInfo = {};
			},
			reresh(e) {
				this.refresh = e;
			},
			pages() {
				var pages = getCurrentPages() // 获取栈实例
				let currentRoute = pages[pages.length - 1].route; // 获取当前页面路由
				let currentPage = pages[pages.length - 1]['$page']['fullPath'] //当前页面路径(带参数)
				return currentPage.split('/')[2];
			},
			async getVuex(i = '') {
				var params = {};
				if (i) {
					params['id'] = i;
				}
				try {
					const e = await getScroll({
						custom: {
							auth: true,
							toast: false,
						},
						params: params
					});
					this.aiType = e.type;
					let sapi;
					if (e.task) {
						sapi = e.task?.api;
						this.dataInfo = e;
					}
					if (e[0] && e[0].task) {
						sapi = e[0]?.task?.api;
						this.dataInfo = e[0];
					}
					if (sapi) {
						this.taskid = e._id;
						this.id = '';
					} else {
						this.taskid = '';
						this.dataInfo = {};
					}

					if (sapi == 'article') {
						this.aiType = 'article';
						this.aicurrent = 0;
					} else if (sapi == 'openai') {
						this.aiType = 'dalle'
						this.aicurrent = 1;
					} else if (sapi == 'image') {
						this.aiType = sapi;
						this.aicurrent = 1;
					} else if (sapi == 'video') {
						this.aiType = sapi;
						this.aicurrent = 2;
					}
				} catch (error) {
					console.error(error);
				} finally {
					if (!this.taskid) this.ress(i);
				}
			},
			async ress(a) {
				try {
					const e = await getName('flow', {
						custom: {
							auth: true,
							toast: false,
						},
						params: {
							sid: a
						}
					});
					console.log(e);

					this.taskid = '';
					// this.taskid = e.data[0].sid;
					if (e.data[0]) {
						var dd = e.data[0];
						this.dataInfo = dd;
						if (Number(dd.status) == 1) {
							this.$message({
								message: '草稿只有自己能看！',
								center: true,
								offset: '300'
							})
						} else {
							if (this.vuex_user._id != dd.id) {
								this.taskid = '';
								console.log('>=<', this.taskid);
								// this.$message({
								// 	message: '禁止抄袭！',
								// 	center: true,
								// 	offset: '300'
								// })
							}
						}
						this.aiType = e.type;
						var sapi = e.data[0]?.task?.api;
						if (sapi == 'article') {
							this.aiType = 'article';
							this.aicurrent = 0;
						} else if (sapi == 'openai') {
							this.aiType = 'dalle'
							this.aicurrent = 1;
						} else if (sapi == 'image') {
							this.aiType = sapi;
							this.aicurrent = 1;
						} else if (sapi == 'video') {
							this.aiType = sapi;
							this.aicurrent = 2;
						}
					}
					// this.$message({
					// 	message: this.taskid,
					// 	center: true,
					// 	offset: '300'
					// })
				} catch (error) {
					console.log(error);
				}
			},
			pages() {
				var pages = getCurrentPages() // 获取栈实例
				let currentRoute = pages[pages.length - 1].route; // 获取当前页面路由
				let currentPage = pages[pages.length - 1]['$page']['fullPath'] //当前页面路径(带参数)
				return currentPage.split('/')[2];
			},
			routes(url) {
				this.routed('/pages' + url);
			},
			routed(url) {
				console.log('routed', url)
				uni.$uv.route({
					url: url,
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.chat-index {
		height: 100vh;

		.nowrap {
			flex-wrap: nowrap;
		}

		.wrap {
			flex-wrap: wrap;
		}

		.middle_item {
			margin-bottom: 5px;
			display: flex;
			align-items: flex-start;
			// width: 100%;
			flex-direction: row;
			flex-wrap: nowrap;
			align-content: stretch;
			justify-content: flex-start;

			.selectable-text {
				-webkit-user-select: text;
				/* Safari */
				-moz-user-select: text;
				/* Firefox */
				-ms-user-select: text;
				/* IE 10+ */
				user-select: text;
				/* Standard syntax */
			}

			::v-deep .code-block {
				background-color: #f8f8f8;
				border: 1px solid #ddd;
				padding: 5px 10px;
				border-radius: 5px;
				white-space: pre-wrap;
				word-break: break-all;
				font-family: 'Courier New', Courier, monospace;
				font-size: 14px;
			}



			.fill {
				width: 40px;
				height: 40px;
				margin: 0px;
				padding: 2px;
				border-radius: 20px;

				::v-deep .el-image__inner {
					width: 40px;
					height: 40px;
					border-radius: 20px;
				}
			}

		}

		.user {
			flex-direction: row-reverse;
		}

		.el-textarea {
			width: 100%;

			::v-deep .el-textarea__inner {
				border: 0px;
				color: #000;
				padding: 0px;
				width: 100%;
				background-color: rgba(0, 0, 0, 0) !important;
			}
		}

	}
</style>